import * as React from "react";
import {connect} from "react-redux";
import { homeActions} from '../../../../../store/home';
import { Tab, Tabs } from "@blueprintjs/core";
import {InputType, InputValue} from './InputTypeValue';
import {AppToaster} from "../../../../../component/Toast";
import InputPanel from '../../../../../component/InputPanel';
import axios from '../../../../../config/axios';
import {host} from '../../../../../config/host';

import './index.less';

class Insert extends React.PureComponent {
    constructor(props) {
        super(props);
        this.handleTabChange = this.handleTabChange.bind(this);
        this.switchTypeComponent = this.switchTypeComponent.bind(this);
        this.handleChangeInputValue = this.handleChangeInputValue.bind(this);
        this.handleInsertOk = this.handleInsertOk.bind(this);
        this.state = {
            types: [],
            chooseType: '',
        }
    }

    componentDidMount() {
        const {homeReduce} = this.props;
        const {menus} = homeReduce;
        this.setState({
            types: menus,
            chooseType: menus[0].menuType,
        })
    }

    handleTabChange(type) {
        const {changeInsertType} = this.props;
        changeInsertType({insertType: type});
        this.setState({
            chooseType: type
        });
    }

    handleChangeInputValue(type) {
        switch (type) {
            case InputType.Manufacturer:
                return InputValue.Manufacturer;
            case InputType.ManufacturerDaily:
                return InputValue.ManufacturerDaily;
            case InputType.ManufacturerDeal:
                return InputValue.ManufacturerDeal;
            case InputType.Tree:
                return InputValue.Tree;
            case InputType.Dealer:
                return InputValue.Dealer;
            case InputType.DealerDeal:
                return InputValue.DealerDeal;
            case InputType.Seller:
                return InputValue.Seller;
        }
    }

    switchTypeComponent() {
        const {types} = this.state;
        const arr = [];
        for (let i = 0; i < types.length; i++) {
            const type = types[i];
            const attributes = this.handleChangeInputValue(type.menuType);
            const values = {};
            const method = "create";
            let Component = <InputPanel attributes={attributes} values={{values}} method={method} menuType={type.menuType} handleOk={this.handleInsertOk}/>;
            const component = <Tab id={type.menuType} title={type.title} panel={Component} key={type.menuType}/>
            arr.push(component);
        }
        return arr;
    }

    async handleInsertOk(data) {
        const {chooseType} = this.state;
        try {
            const msg = await axios.post(host + chooseType.toLowerCase() + "/create", data);
            if (msg.data.statusCode === 0) {
                AppToaster.show({ message: msg.data.statusInfo });
            } else {
                AppToaster.show({ message: "添加成功" });
            }
        } catch (e) {
            console.log(e)
            AppToaster.show({ message: "发生错误" });
        }
    }

    render() {
        const {chooseType} = this.state;
        return(
            <div>
                <Tabs id="insert-record" onChange={this.handleTabChange} selectedTabId={chooseType}>
                    {this.switchTypeComponent()}
                </Tabs>
            </div>
        )
    }
}

const mapStateToProps = ({ homeReduce }) => ({ homeReduce });
export default connect(mapStateToProps, homeActions)(Insert);